<template>
  <div>
    <h2>售后订单</h2>
    <div class="main">
      <div class="top">
        <span>订单状态：</span>
        <el-button plain> 全部 </el-button>
        <el-button plain> 仅退款 </el-button>
        <el-button plain> 退货退款 </el-button>
        <el-button plain> 拒绝退款 </el-button>
        <el-button plain> 商品待退货 </el-button>
        <el-button plain> 进货带退货 </el-button>
        <el-button plain> 已退款 </el-button>
      </div>
      <div class="center">
        <div class="block">
          <span class="demonstration">创建时间:</span>
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            align="left"
          >
          </el-date-picker>
        </div>
        <div class="orderId">
          <span>订单号:</span>
          <input v-model="value2" type="text" placeholder="请输入订单号" />
          <button @click="searchId">
            <i class="el-icon-search"></i>
          </button>
        </div>
      </div>
      <el-table :data="newData" stripe style="width: 100%">
        <el-table-column prop="_id" label="订单号" width="250">
        </el-table-column>
        <el-table-column prop="user" label="用户信息"> </el-table-column>
        <el-table-column label="商品信息">
          <template slot-scope="scope">
            <img
              width="30"
              style="vertical-align: middle"
              :src="scope.row.img"
              alt=""
            />
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="pay_actual" label="实际支付"> </el-table-column>
        <el-table-column prop="refund_time" label="发起退款时间" width="150">
        </el-table-column>
        <el-table-column prop="status" label="退款状态"> </el-table-column>
        <el-table-column prop="refund_note" label="退款信息"> </el-table-column>
        <el-table-column label="售后备注"> </el-table-column>
        <el-table-column width="250" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >更多</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      tableData: [],
      value2:'',
      value:''
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    searchId(){
      this.value=this.value2
    },
    async fetchData() {
      let { data: res } = await this.$http.order.findByAfter();
      console.log(res.data);
      this.tableData = res.data;
    },
  },
  created() {
    this.fetchData();
  },
  computed:{
    newData(){
      if (this.value=='') {
       
        return this.tableData
      }else{
        return this.tableData.filter(item=>item._id==this.value)
      }
      
    }
  }
};
</script>

<style lang='scss' scoped>
.main {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .top {
    margin-bottom: 20px;
  }
  .center {
    display: flex;
    .block {
      margin-right: 50px;
      
      span {
        margin-right: 20px;
      }
    }
    .orderId {
      span {
        margin-right: 20px;
      }
      input {
        height: 40px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        border-radius: 4px 0 0 4px;
        outline: none;
      }
      button {
        height: 40px;
        width: 40px;
        border: none;
        background-color: blue;
        border-radius: 0 4px 4px 0;
        i {
          color: white;
        }
      }
    }
  }
}
</style>